//后台配置/数据配置

import React, { Component } from 'react';
import { connect } from 'dva';
import {  Collapse ,Card, Button,  Input,Icon,Table, InputNumber ,Checkbox, Row, Col ,message  } from 'antd';

import style from './DataModel.less'
//引入字体图标组件

import {bgConQuery} from '../../services/redmoe';
import request from '../../utils/request';
import {getRepairStandard,soilDataModeloperation} from '../../services/redmoe';
import moment from 'moment'
import DataModelTu from './Echarts/DataModelTu'
const Panel = Collapse.Panel;
class DataModel extends Component {
    state={
        arr:[],
        arrx:[],
        dataarr:[],
        arrcopy:[],
        area:65,
        chart:{},
        minT:null,
        maxT:null,
        factor:1,
        visible: false,
        panelText:'展开数据列表',
        data:{},
        checkText:[],
        tabledata:[],
        columns:[],
        columnsdata:[]

    }
    //进入页面事件

    //多选框事件
    oncheck = (checkedValues) => {
        if(checkedValues.length > 6) {
            message.success('最多选择6项指标!')
            return 
        }
        console.log('checked = ', checkedValues);
        this.setState({
            arrx:checkedValues
        })
    }
    //抽屉
    showDrawer = () => {
        this.setState({
          visible: true,
        });
      };
    
      onClose = () => {
        this.setState({
          visible: false,
        });
      };
      //控制展开表格
      panel = (e) => {
      
        if(e[0] == '1') {
          this.setState({
            panelText:'收起数据列表'
          })
        } else {
          this.setState({
            panelText:'展开数据列表'
          })
        }
      }
      //添加数据
      addArr = () => {
        if(this.state.arrx.length == 0) {
          message.warning(`至少选择一项指标!`)
          return
        }
        getRepairStandard(this.state.arrx).then(data => {
          console.log(data)
          //如果有参数参数不足
          if(data.data.rc == 1) {
            let arrtext = data.data.ret.toString()
            message.warning(`${arrtext},必要参数不全!`)
            return
          }

          if(data.data.rc == 0) {
            this.setState({
              dataarr1:data.data.ret,
              arrcopy:data.data.ret
            })
            setTimeout(() => {
              this.setState({
                arr:this.state.arrx,
              
              })
          
            })
          }
        })
      
      }

      //重置事件
      reset = () => {
        this.setState({
          arrx:[],
          arr:[],
          panelText:'展开数据列表',
          minT:null,
          maxT:null,
          chart:[],
          tabledata:[],
          columns:[]

        })
      }

      //参数配置中的取值
      areaMax = (v,value) => {
     
        this.setState({
          [v]:value
        })
      }

      //动态 指标值
      inEdit = (key,value) => {
        this.state.dataarr[key] = value
        setTimeout(() => {
          this.setState({
            dataarr:this.state.dataarr
          })
     
        })
      }
    
      //点击运行事件
      rundata = () => {
        const {area,minT,maxT,factor} = this.state
       
       
        if(this.state.arrx.length == 0) {
          message.warning(`请先添加运行指标!`)
          return
        }
        if(area == undefined || minT == null || maxT == null || factor == undefined) {
          message.warning(`运行参数不可为空!`)
          return
        }
       
        if(this.state.dataarr.length == 0) {
          message.warning(`运行参数不可为空!`)
          return
        }

        if(minT > maxT) {
          message.warning(`最小温度不可低于最大温度!`)
          return
        }


        // if(this.state.area == null)
     
        var runarr = []
        this.state.arr.map((item,index) => {
         
          runarr.push({
            name:item,
            value:this.state.dataarr[index]
          })
        })
     
      setTimeout(() => {
        let data = {
          area:this.state.area,
          minT:this.state.minT,
          maxT:this.state.maxT,
          factor:this.state.factor,
          data:runarr
        }

        soilDataModeloperation({...data}).then(data => {
          console.log(data)
          if(data.data.rc == 0) {
            data.data.ret.from.columns.forEach((item) => {
             
              item.width=`${100/data.data.ret.from.columns.length}%`
            })
            setTimeout(() => {
              this.setState({
                columns:data.data.ret.from.columns,
                tabledata:data.data.ret.from.dataSource,
                chart:data.data.ret.graph,
                checkText:data.data.ret.graph.nameArr
              })
            })
            
          }
        })


      })
       

      }


    render() {
      const {area,minT,maxT,factor} = this.state
        return (
        
            <div>
                        <Card
                            className={style.CardTop}
                        >
                        <div className={style.Top} style={{fontWeight:900,fontSize:16}}>
                        <span className={style.cire1}></span>
                            添加指标
                            </div>
                          <Checkbox.Group  
                          value={this.state.arrx}
                          onChange={this.oncheck}>
                            <Row>
                            <Col  span={4}><Checkbox value="六氯苯">六氯苯</Checkbox></Col>
                            <Col span={4}><Checkbox value="硝基苯">硝基苯</Checkbox></Col>
                            <Col span={4}><Checkbox value="α-六六六">α-六六六</Checkbox></Col>
                            <Col span={4}><Checkbox value="β-六六六">β-六六六</Checkbox></Col>
                            <Col span={4}><Checkbox value="γ-六六六">γ-六六六</Checkbox></Col>
                            <Col span={4}><Checkbox value="五氯酚">五氯酚</Checkbox></Col>
                            <Col span={4}><Checkbox value="苯并(a)蒽">苯并(a)蒽</Checkbox></Col>
                            <Col span={4}><Checkbox value="苯并(b)荧蒽">苯并(b)荧蒽</Checkbox></Col>
                            <Col span={4}><Checkbox value="苯并(a)芘">苯并芘</Checkbox></Col>
                            <Col span={4}><Checkbox value="茚并(1,2,3-cd)芘">茚并(1,2,3-cd)芘</Checkbox></Col>
                            <Col span={4}><Checkbox value="二苯并(a,h)蒽">二苯并(a,h)蒽</Checkbox></Col>
                            <Col span={4}><Checkbox value="三氯乙烯">三氯乙烯</Checkbox></Col>
                            <Col span={4}><Checkbox value="氯苯">氯苯</Checkbox></Col>
                            <Col span={4}><Checkbox value="1,4-二氯苯">1,4-二氯苯</Checkbox></Col>
                            <Col span={4}><Checkbox value="苯">苯</Checkbox></Col>
                            <Col span={4}><Checkbox value="乙苯">乙苯</Checkbox></Col>
                            <Col span={4}><Checkbox value="二甲苯">二甲苯</Checkbox></Col>
                            <Col span={4}><Checkbox value="1,2-二氯苯">1,2-二氯苯</Checkbox></Col>
                            <Col span={4}><Checkbox value="1,2,3-三氯苯">1,2,3-三氯苯</Checkbox></Col>
                            <Col span={4}><Checkbox value="1,2,4-三氯苯">1,2,4-三氯苯</Checkbox></Col>
                            <Col span={4}><Checkbox value="硝基氯苯">硝基氯苯</Checkbox></Col>
                            
                            <Col span={4}><Button size="small" type="primary" style={{marginRight:3}} onClick={this.addArr}>添加</Button><Button size="small"  onClick={this.reset}>重置</Button></Col>
                           
                            </Row>
                        </Checkbox.Group>
                         
                        </Card>
                        <Card
                            className={style.CardBottom}

                        >
                         <span className={style.cire2}></span>
                          <div className={style.Top} style={{top:'0.3%',fontWeight:900,fontSize:16}}>
                            参数配置
                            </div>
                         <Row>
                            <Col span={6}>土壤比表面积:<InputNumber size="small" min={0.1} style={{margin:"0 3px"}} value={area} onChange={this.areaMax.bind(this,'area')}/>m³/kg</Col>
                            <Col span={6}>安全系数:<InputNumber size="small" min={1}  style={{margin:"0 3px"}} value={factor} onChange={this.areaMax.bind(this,'factor')}/>m³/kg</Col>
                            <Col span={6}>温度:<InputNumber size="small" min={100} max={500} style={{margin:"0 3px"}} value={minT} onChange={this.areaMax.bind(this,'minT')}/>到<InputNumber size="small" max={500} min={100}style={{margin:"0 3px"}} value={maxT} onChange={this.areaMax.bind(this,'maxT')}/>℃</Col>
                            <Col span={6}><Button size="small" type="primary" style={{marginRight:3}} onClick={this.rundata}>运行</Button></Col>

                            
                         </Row>

                          <Row style={{marginTop:5}} className={style.rowBottom}>
                          {this.state.arr?
                                this.state.arr.map((item,key,index) => {
                                    return(
                                        <Col span={6}>{item}:<InputNumber min={0.01} size="small" style={{margin:"3px 3px"}} value={this.state.dataarr[key]} onChange={this.inEdit.bind(this,key)}/>/<span style={{marginRight:3}}>{this.state.arrcopy[key]}</span>/m³/kg</Col>
                                    )
                                }):""
                            }
                          </Row>


                        <div style={{height:'58vh'}}>
                     
                        <div className={style.result} style={{top:'0.3%',fontWeight:900,fontSize:16}}>
                        <span className={style.cire3}></span>
                           结果展示
                            </div>
                         <DataModelTu
                            checkText={this.state.checkText}
                            data={this.state.chart}
                            />
                        </div>
                          


                          <Collapse  bordered={false}   onChange={this.panel} >
                        
                            <Panel header={this.state.panelText} key="1"
                        
                            >
                            <div className={style.myTable}>
                                <Table
                                scroll={{ y: 240 }}
                                    ref="table"
                                    loading={this.state.tableLoading}
                                    style={{width:this.state.repairWidth,margin:0}}
                                    onChange={this.rowSelection}
                                    // rowSelection={rowSelection}
                                    columns={this.state.columns}
                                    dataSource={this.state.tabledata }
                                    align="center"
                                    className={style.Table}
                                    bordered={true}
                                    pagination={false}
                                    size="small"
                                   
                                />
                             </div>
                             
                            </Panel>
                             
                         </Collapse>

                        </Card>
                     
                        
            </div>
        )
    }
    
    
}

export default connect()(DataModel)